<template>
    <el-dialog v-dialog-drag :title="$t('UploadImg')" :visible.sync="addUploadDialog" width="40%"
               :before-close="handleUploadDialogClose">

        <el-form  ref="imgTypeForm" :model="imgType" :rules="rules" class="demo-ruleForm"  label-width="80px">

                <el-form-item prop="type"  :label="$t('Type')" required>
                    <el-select v-model="imgType.type" :placeholder="$t('Please_Select')">
                        <el-option
                            v-for="img in imgTypes"
                            :key="img.value"
                            :value="img.label"
                            :label="img.value">
                        </el-option>
                    </el-select>
                </el-form-item>

            <el-form-item :label="$t('Picture')" required>
                <el-upload
                    ref="upload"
                    class="upload-demo"
                    :headers="headers"
                    :data="{'type':imgType.type}"
                    :action="uploadImgUrl"
                    :on-preview="handlePreview"
                    :on-success="uploadSuccess"
                    :on-error="uploadError"
                    :before-upload="beforeupload"
                    :file-list="fileList"
                    :auto-upload="false"
                    list-type="picture">
                    <el-button slot="trigger" size="small" type="primary">{{$t('SelectImage')}}</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload('imgTypeForm')">{{$t('UploadToServer')}}</el-button>
                    <div slot="tip" class="el-upload__tip">{{$t('UploadRule')}}</div>
                </el-upload>
            </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="handleUploadDialogClose">{{$t('Confirm')}}</el-button>
            <!--<el-button size="small" @click="handleUploadDialogClose">{{$t('Cancel')}}</el-button>-->
        </div>
    </el-dialog>
</template>

<script>
    import * as appServer from '../../../store/appServerParams.js'
    import * as util from '../../../assets/util.js';
    export default {
        props:{
            addUploadDialog:false
        },
        data() {
            return {
                imgTypes: [{
                    value: 'port',
                    label: 'port'
                }, {
                    value: 'power',
                    label: 'power'
                }],
                uploadImgUrl:appServer.BASE_URL+"/sys/uploadImg",
                fileList: [],
                headers:{
                    Authorization:util.local(appServer.TOKEN)
                },
                imgType: {
                    type:""
                },
                rules: {
                    type: [{required: true, message: this.$t('Please_Select_Type')}],
                }
            };
        },
        methods: {
            handleUploadDialogClose(done){
                this.$parent.addUploadDialog = false
            },
         /*   handleRemove(file, fileList) {
                console.log(file, fileList);
            },*/
            handlePreview(file) {
                console.log(file);
            },
         /*   handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },*/
        /*    beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },*/
            beforeupload(file) {
                let msg=file.name.substring(file.name.lastIndexOf('.')+1)
                const extension = msg === 'png'
                const extension2 = msg === 'jpg'
                if(!extension && !extension2) {
                    this.$message({
                        message: this.$t('UploadFileRule'),
                        type: 'warning'
                    });
                }
                const isLt2M = file.size / 1024 / 1024 < 2
                if(!isLt2M) {
                    this.$message({
                        message: this.$t('UploadSizeRule'),
                        type: 'warning'
                    });
                }
                return extension || extension2 && isLt2M
            },
            submitUpload(formName) {
                let vm = this;
                vm.$refs[formName].validate((valid) => {
                    if (valid) {
                        vm.$refs.upload.submit();

                    } else {
                        return false;
                    }
                });

            },
            uploadSuccess(response){
                this.$message.success(this.$t('Upload_Success'));
                this.$parent.refreshPowerImg();
                this.$parent.refreshPortImg();
            },
            uploadError(response){
                this.$message.error(this.$t('Upload_Failed'));
            },

        },
        created() {

        },
        mounted() {
        }
    }
</script>

<style scoped>

</style>
